<template>
  <div class="container">
    <div
      :class="[isWidth ? '' : 'realNameTable', 'realNameBox']"
      ref="realNameBox"
    >
      <div @mouseover="ncrFormat" @mouseleave="leave">
        <el-table
          :data="tableData"
          :header-cell-style="{
            background: '#01356A !important',
            color: '#04AFF6',
            borderBottom: 0,
          }"
          ref="tableref"
          @row-click="clickRealName"
          @cell-mouse-enter="enter"
          @cell-mouse-leave="leaveTab"
          class="tableData tableDataRealname"
        >
          <el-table-column
            align="center"
            prop="idcardPhoto"
            label="身份证照片"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.idcardPhoto"
                style="width: 60px; height: 60px; margin-top: 2px"
                :src="scope.row.idcardPhoto"
              ></el-image>
              <img
                v-else
                src="../../../static/img/personBg.png"
                alt
                width="60px"
                height="60px"
                style="margin-left: 14px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="姓名"
            :formatter="formatTd"
            min-width="90"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            min-width="140"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.idcard | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="状态"
            :formatter="formatTd"
            min-width="110"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="inputDate"
            label="录入时间"
            :formatter="formatTd"
            min-width="180"
          >
            <!-- 恩施展示 yyyy-mm-dd  hh:mm:ss -->
            <!-- 其他区域展示 yyyy-mm-dd  -->
            <template slot-scope="scope">
              <span>{{ scope.row.inputDate.substring(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="account"
            label="工资卡号"
            :formatter="formatTd"
            min-width="140"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.account | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="tel"
            label="手机号"
            :formatter="formatTd"
            min-width="140"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.tel | deseHandler(3, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'realName',
  data() {
    return {
      recordsData: {
        total: '',
        scale: '',
        success: '',
      }, //违法记载
      isWidth: true,
      recordsChart: '',
      tableData: [],
      timer: null,
      isLow: false,
      //   tabHeight:null
    }
  },
  created() {},
  computed: {
    projectId() {
      return this.$store.getters.eZhouprojectId
    },
    area() {
      return this.$store.getters.eZhouArea
    },
  },
  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1440) {
      this.isWidth = false
    }
    let div =
      document.getElementsByClassName('tableDataRealname')[0].children[2]
    // if(!this.isWidth) {
    //     div.style.height =this.$refs.realNameBox.offsetHeight - 45 + "px";
    // }else {
    if (this.isWidth) {
      div.style.height = this.$refs.realNameBox.offsetHeight - 45 + 'px'
    }
    // }
    this.$nextTick(function () {
      this.getTableList()
    })
  },
  watch: {
    projectId(newValue, oldValue) {
      this.getTableList()
    },
    area(val) {
      this.getTableList()
    },
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    // enter() {
    //     $('.tableData').addClass('scrollbarShow')
    // },
    // leaveTab() {
    //     $('.tableData').removeClass('scrollbarShow')
    // },
    getHeight(val) {
      let div =
        document.getElementsByClassName('tableDataRealname')[0].children[2]
      div.style.height = this.$refs.realNameBox.offsetHeight - 45 + 'px'
    },
    ncrFormat() {
      if (this.tableData.length > 2) {
        clearInterval(this.timer)
      }
    },
    leave() {
      if (this.tableData.length > 2) {
        this.rollTable()
      }
    },
    rollTable() {
      this.$nextTick(() => {
        // let div = document.getElementsByClassName("el-table__body-wrapper")[1];
        // if(!this.isWidth) {
        //   div.style.height = "160px";
        // }else {
        //   div.style.height = "250px";
        // }
        let div = document.getElementsByClassName('tableDataRealname')[0]
        let t = div.getElementsByClassName('el-table__body')[0]
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
          if (this.tableData.length > 2) {
            var data = this.tableData[0]
            setTimeout(() => {
              this.tableData.push(data)

              t.style.transition = 'all .5s'

              t.style.marginTop = '-82px'
            }, 500)

            setTimeout(() => {
              this.tableData.splice(0, 1)

              t.style.transition = 'all 0s ease 0s'

              t.style.marginTop = '0'
            }, 1000)
          }
        }, 2000)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.timer)
        })
      })
    },
    getTableList() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/employee/expand/projectemp',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
          pageNo: 1,
          pageSize: 20,
          projectId: this.projectId,
        },
      }).then(
        (res) => {
          if (!res.data.hasError) {
            this.tableData = []
            this.tableData = res.data.result.results
            if (this.$refs.tableref) {
              this.$refs.tableref.doLayout()
            }
            if (this.tableData.length > 2) {
              this.rollTable()
            }
          } else {
            this.$message.error('数据获取失败')
          }
        },
        (res) => {
          this.$message.error('数据获取失败')
        }
      )
      // .catch((error) => {
      //   this.$message.error("数据获取失败13");
      // });
    },
    clickRealName(row, column, event) {
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: row.projectId,
          activeName: 'second',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    line-height: 30px;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .realNameBox {
    height: 100%;
    background-color: transparent;
    padding: 0 10px;
  }
  .realNameTable /deep/ .el-table th > .cell {
    padding: 6px 10px;
    font-size: 12px;
  }
  .realNameTable /deep/.el-table td > .cell {
    padding: 6px 10px;
    font-size: 12px;
  }
}
/deep/ .el-table {
  color: #b8e8fa;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
  color: #b8e8fa;
}
/deep/ .el-table__row:hover > td {
  background-color: transparent !important;
  cursor: pointer;
}

/deep/ .el-table__row--striped:hover > td {
  background-color: transparent !important;
}
// 滚动条样式
/deep/ ::-webkit-scrollbar-thumb {
  background-color: #31405c;
}
/deep/::-webkit-scrollbar-track-piece {
  background-color: #98a0ae !important;
  opacity: 0.2;
}
/deep/ .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: rgba(0, 0, 0, 0.2);
  // opacity: 0.4;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent !important;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: transparent !important;
}
/deep/ .el-table th > .cell {
  padding: 6px 16px;
}
/deep/ .el-table td > .cell {
  padding: 6px 16px;
}

.tableData /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  // display: none;
}
.scrollbarShow /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  display: block;
}
</style>
